@page "/Calendar/Month-Picker"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
  <p>The following sample demonstrates the Calendar control acting as a month picker. It allows you to select values in terms of months.</p> 
</SampleDescription>
<ActionDescription>
    <p>The Calendar has the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start' target='_blank'> Start</a> and the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth' target='_blank'> Depth</a> properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade).</p>
    <p>More information on the Calendar Start/Depth can be found in the <a href='https://blazor.syncfusion.com/documentation/calendar/calendar-views/#calendar-views' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class=" control-section">
    <div class="calender-section">
        <div id="calender-control">
            <SfCalendar TValue="DateTime?" Start="@CalendarView.Year" Depth="@CalendarView.Year" @bind-Value="@DropVal">
            </SfCalendar>
        </div>
        <div id="display_date">
            <span id="date_value">Selected values: @(DropVal?.ToString("MMMM yyyy"))</span>
        </div>
    </div>
</div>

<style>
    #calender-control {
        max-width: 300px;
        margin: 0 auto;
    }

    #display_date {
        max-width: 300px;
        margin: 0 auto;
        padding-top: 10px;
        color: rgba(0, 0, 0, 0.8);
    }
</style>
@code {
    public DateTime? DropVal { get; set; } = DateTime.Now;

}